<template>
	<view class="item_wrapper">
		<view class="top" @click="">
			<slot name="topRight" :info="info"></slot>
			<view class="left">
				<u--image :lazy-load="true" :showLoading="true"
					:src="info.mediaUrl || '../../../static/default/img_404.jpg'" width="260rpx" height="250rpx"
					radius="10rpx">
					<template v-slot:loading>
						<u-loading-icon color="rgba(232,86,86,1)"></u-loading-icon>
					</template>
				</u--image>
				<view class="update" v-if="info.timeAway">
					{{ info.timeAway }}前
				</view>
			</view>

			<view class="right">
				<u--text :text=" info.communityName ? info.communityName : info.name" size="16" bold :block="false"
					lines="1"></u--text>
				<u--text v-if="info.rentalType=='0'"
					:text="info.buildingNumber+'栋'+info.unitNumber+'单元'+info.ventricleNumber+'室/'+info.roomNumber+'号/'+info.houseType"
					size="14" :block="false" lines="1"></u--text>
				<u--text v-if="info.rentalType=='1'"
					:text="info.buildingNumber+'栋'+info.unitNumber+'单元'+info.ventricleNumber+'室/'+info.houseType"
					size="14" :block="false" lines="1"></u--text>

				<view class="tag_wrp" v-if="info.labelList.length != 0">
					<u-tag class="tag_name" v-for="(item,index) of computedTagNumver(info.labelList)" :key="index"
						:text="item.labelName" size="mini" type="info" color="#666" bgColor="#eee"
						borderColor='transparent'></u-tag>
				</view>
				<view class="tag_wrp" v-if="info.labelList.length == 0">
					<u-tag class="tag_name" text="暂无标签" size="mini" type="info" color="#666" bgColor="#eee"
						borderColor='transparent'></u-tag>
				</view>
				<view class="money">
					<view><u--text :text="info.rental" size="14" bold :block="false" lines="1"
							color="rgba(232,86,86,1)"></u--text></view>
					<view><u--text text=" 元 /月" size="14" bold :block="false" lines="1"
							color="rgba(232,86,86,1)"></u--text></view>
				</view>

			</view>
		</view>
	<!-- 		<slot name="bottom" :info="info">
			<view class="bottom">
				<view style="padding-right: 10rpx;">
					<u-button ripple @click="sendVideoClick" size="mini" color="#ff84e5">发视频</u-button>
				</view>
				<view class="">
					<u-button ripple @click="sendCircleClick" size="mini" color="#ff84e5">发圈</u-button>
				</view>
			</view>
		</slot> -->
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {}
		},
		methods: {
			computedTagNumver(tagLIst) {
				if (tagLIst.length < 8) return tagLIst
				var arr = tagLIst
				return arr.slice(0, 8)
			},
			sendVideoClick() {

			},
			sendCircleClick() {

			},
		},
	}
</script>

<style scoped lang="scss">
	.item_wrapper {
		border-bottom: 1px solid #eee;
		margin: 10px 0;
		padding-bottom: 10px;

		.top {
			display: flex;
			align-items: center;
			// overflow: hidden;

			.left {
				padding-right: 20rpx;

				.update {
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					width: auto;
					padding: 10rpx;
					height: auto;
					background-color: #71736d;
					opacity: 0.6;
					position: relative;
					top: -25rpx;
				}
			}

			.right {
				margin-top: -40rpx;

				.tag_wrp {

					// max-height: 165rpx;
					width: 100%;
					height: auto;
					// line-clamp: 2;
					// overflow: hidden;
					text-overflow: ellipsis;

					// white-space: nowrap;  
					.tag_name {
						display: inline-block;
						margin: 2rpx;
					}
				}

				.money {
					display: flex;
					justify-content: flex-start;
					align-items: flex-end;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
		}

	}
</style>